<script setup lang="ts">
import ToolView from "@/modules/tools/layout/tool-view.vue";
import { computed, ref } from "vue";
import { formatBytes1 } from "@/framework/util/bytes.ts";
import Grid from "@/components/framework/grid.vue";

const getStringSizeInBytes = (text: string) => new TextEncoder().encode(text).buffer.byteLength;

const text = ref("");

const stats = computed(() => {
  const t = text.value.trim();
  return {
    charCount: text.value.length,
    wordCount: t === "" ? 0 : t.split(/\s+/).length,
    lineCount: t === "" ? 0 : t.split(/\r\n|\r|\n/).length,
    size: getStringSizeInBytes(text.value),
  };
});
</script>

<template>
  <tool-view title="文本统计" description="获取有关文本、字符数、字数、大小等的信息">
    <div class="p-20 full-view flex-center">
      <grid rows-preset="two-rows-1" row-gap="20px">
        <div class="overflow-auto bg-container">
          <label class="block" style="min-height: 100%">
            <a-textarea v-model:value="text" auto-size allow-clear :bordered="false" placeholder="在此输入文本" />
          </label>
        </div>
        <div class="flex child-flex-1 col-gap-20">
          <a-card>
            <a-statistic title="字符数" :value="stats.charCount" />
          </a-card>
          <a-card>
            <a-statistic :value="stats.wordCount">
              <template #title>单词数(<span class="font-12 color-text-tertiary">不一定准确</span>)</template>
            </a-statistic>
          </a-card>
          <a-card>
            <a-statistic title="行数" :value="stats.lineCount" />
          </a-card>
          <a-card>
            <a-statistic title="字节大小" :value="stats.size" />
          </a-card>
        </div>
      </grid>
    </div>
  </tool-view>
</template>
